<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>项目管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/static/super_cmdb/css/font.css">
    <link rel="stylesheet" href="/static/super_cmdb/css/xadmin.css">

  </head>

  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:33px">ဂ</i></a>
    </div>
    <div class="x-body">
      <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加项目','/super_cmdb/project_add/',1000,400)"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有项目：{{ project_list.count }} 个</span>
      </xblock>
      <xblock>
          <form method="post" id="myform" onchange="submitForm_project_filter()">
              {% csrf_token %}
              <input style="width: 350px;height: 30px;border-radius: 7px;border: 0px;background-color: #e2e2f5;" placeholder="Filter: 项目名称 |工作室" name="project_filter" value="{{ project_filter }}" onchange="submitForm();" >
          </form>
      </xblock>
      <table class="layui-table" id="on_color">
        <thead>
          <tr>
            <th>
              <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>项目名称</th>
            <th>工作室</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for project_info in project_list %}
              <tr>
                  <td>
                      <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{{ project_info.id }}'><i class="layui-icon">&#xe605;</i></div>
                  </td>

                    <td>{{ project_info.id }}</td>
                    <td>{{ project_info.name }}</td>
                    <td>{{ project_info.describe|slice:"20" }}</td>
                    <td>{{ project_info.create_time|date:"Y-m-d H:i:s" }}</td>
                    <td>{{ project_info.update_time|date:"Y-m-d H:i:s" }}</td>
                    <td>
                      <a title="编辑"  onclick="x_admin_show('编辑','/super_cmdb/project_edit-{{ project_info.id }}',1000,700)" href="javascript:;">
                        <i class="layui-icon">&#xe642;</i>
                      </a>
                      <a title="删除" onclick="member_del(this,'{{ project_info.id }}')" href="javascript:;">
                        <i class="layui-icon">&#xe640;</i>
                      </a>
                    </td>
              </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.cookie.js"></script>
    <script>
        $(function () {
            $.ajaxSetup({
                beforeSend:function (xhr,settings) {
                    xhr.setRequestHeader("X-CSRFtoken",$.cookie("csrftoken"));
                }
            })
        });

      layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });

      /*-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
              var url = "/super_cmdb/project_del/";
              //console.log(url);
              $.ajax({
                    url: url,
                    type: "POST",
                    //data: $('#layui-form').serialize(),
                    data: {"project_id":id},
                    success: function (data) {
                        //console.log(data);
                    }
                });
              $(obj).parents("tr").remove();
              layer.msg('已删除!',{icon:1,time:1000});
          });
      }



      function delAll (argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除选中项吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            var url = "/super_cmdb/project_del/";
              $.ajax({
                    url: url,
                    type: "POST",
                    //data: $('#layui-form').serialize(),
                    data: {"project_id":JSON.stringify(data)}, //将data转换成字符串才能提交到后端
                    success: function (data) {
                        //console.log(data);
                    }
                });
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }
      function submitForm_project_filter(){
            //获取form表单对象,提交选择项目
            var form = document.getElementById("myform");
            form.submit();//form表单提交
      }

    //选中着色,包含这个标签下的所有子标签
    var trs = document.getElementById('on_color').getElementsByTagName('tr');
    window.onload = function(){
        for( var i=0; i<trs.length; i++ ){
            trs[i].onmousedown = function(){
                tronmousedown(this);
            }
        }
    };
    function tronmousedown(obj){
        for( var o=0; o<trs.length; o++ ){
            if( trs[o] == obj ){
                trs[o].style.backgroundColor = 'rgb(174, 212, 234)';
            }
            else{
                trs[o].style.backgroundColor = '';
            }
        }
    }


    </script>
  </body>

</html>
